.demo-page {
  padding : 0px;
  height  : 100%-6px;
  width   : 100%;
  top     : 50px;
  position: absolute;
}

img {
  margin-right: 8px;
}

html {
  scrollbar-width: none;
}

.modal-dialog {
  max-width: none;
  margin   : 20px;
}

.modal-body {
  height: 100%;
  overflow-y: hidden !important;
}

.half-drawer {
  padding         : 12px 16px 0 12px;
  position        : fixed;
  right           : 0;
  top             : 50px;
  bottom          : 0;
  background-color: #fff;
  width           : 360px;
  box-shadow      : -8px 0 40px 0 rgba(0, 0, 0, 0.2);
  overflow        : auto;
}

.model-box-tabs {
  position        : absolute;
  left            : 0;
  right           : 0;
  top             : 13px;
  height          : 50px;
  display         : flex;
  justify-content : center;
  width           : 100%;
  background-color: transparent;
  z-index         : 1003;
  user-select     : none;
  border          : 0 !important;

  .nav-link {
    height        : 100%;
    margin        : 0 30px 0 30px;
    padding-bottom: 10px;
  }

  .ti3-tabs {
    font-size    : 18px;
    color        : #ADB0B8;
    position     : relative;
    padding-left : 0;
    margin-bottom: 0;

    &::before {
      display: table;
      content: " ";
    }

    &::after {
      display: table;
      content: " ";
      clear  : both;
    }

    &>li {
      display: inline-block;
      height : 100%;
    }
  }

  .ti3-tabs>li.ti3-tab-active:not(.disabled)>a {
    color        : #fff;
    border-bottom: 2px solid#96ADFA;
    font-weight  : 500;
    cursor       : pointer;
  }

  .ti3-tabs>li.disabled>a {
    cursor: not-allowed;
  }

  .ti3-tabs>li>a:hover {
    text-shadow: 0 0 1px #fff;
    color      : #ADB0B8;
    font-weight: 500;
  }

  .ti3-tabs>li>a {

    color                  : #ADB0B8;
    border-top-left-radius : 10px;
    border-top-right-radius: 10px;
    overflow               : hidden;
    position               : relative;

    span {
      z-index: 20;
    }
  }

  .ti3-tab-content {
    border: none;
  }

  .task-scheduling-panel {
    padding: 0px;
  }

  .task-list-panel {
    margin : 20px 24px 0 24px;
    padding: 0px;
  }
}

.editor-disactive {
  display: none;
}

.taskLists-disactive {
  display: none;
}

.main-container {
  width          : 100%;
  height         : 100%;
  display        : flex;
  justify-content: space-around;
}

.text-editor {
  background: #fff;
  overflow  : hidden;
  height    : 100%;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.insert-panels {
  background: #f2f5fc;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.graph {
  background: #fff;
  height    : 100%;
  width     : 100%;
  bottom    : 0;
  overflow  : hidden;
}

.warning {
  background: rgba(240, 240, 35, 0.8);
  position  : absolute;
  width     : 100% !important;
  left      : 0 !important;
}

.main-container-accordition {
  width: 320px;
}

.main-container-body {
  width           : 1564px;
  background-color: white;
  border-right    : 10px solid #EEEEEE;
}

:host ::ng-deep .custom-class {
  .devui-toast-item {
    color           : #252b3a;
    background-color: #ffffff;

    .devui-toast-icon-close {
      top  : 10px;
      right: 13px;

      .devui-toast-close-icon {
        fill: #252b3a;
      }
    }

    .devui-toast-image {
      top: 15px;
    }

    .devui-toast-message {
      line-height: 23px;

      .devui-toast-title {
        font-size: 16px;
      }

      p {
        font-size: 14px;
      }
    }
  }
}

.ace_gutter {
  z-index: 0;
}

.ace_content {
  z-index: 0;
}

.as-split-area-left {
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width   : none; /* Firefox */
}

.as-split-area-left::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
